<template>
  <a-card style="width: 100%; height: 100%">
    <template #title>
      <ShopTwoTone twoToneColor="#52c41a" /> 商品管理
    </template>
    <template #extra>
      <a-button @click="addProduct"><PlusOutlined /> 添加商品</a-button>
    </template>
    <!-- 搜索商品的组件 -->
    <SearchForm
      :updateDataSource="updateDataSource"
      :initProductTable="initProductTable"
    />
    <!-- 展示商品的表格 -->
    <a-table
      :dataSource="dataSource"
      rowKey="id"
      :columns="columns"
      :pagination="false"
      :scroll="{ y: 450 }"
      style="margin-top: 17px"
    >
      <template #name="{ record }">
        <a-tooltip>
          <template #title>点击预览商品图片</template>
          <span @click="showPicture(record)" class="vi-hover">
            {{ record.name }}</span
          >
        </a-tooltip>
      </template>
      <template #price="{ text }">
        <a-tag color="red">{{ text + " 元" }}</a-tag>
      </template>
      <template #classesId="{ text }">
        <a-tag :color="text % 2 === 0 ? 'green' : 'orange'">{{
          productType(text)
        }}</a-tag>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="primary" @click="editProduct(record)">
            <template #icon><EditOutlined /></template>
          </a-button>
          <a-button @click="deleteProduct(record.id)" danger>
            <template #icon><DeleteOutlined /></template>
          </a-button>
        </a-space>
      </template>
    </a-table>
  </a-card>
  <!-- 展示商品图片 -->
  <a-modal v-model:visible="isShow" title="图片预览" :footer="null">
    <div style="text-align: center">
      <a-image :width="200" :src="imgSrc" />
    </div>
  </a-modal>
  <!-- 展示添加/编辑商品的模态框 -->
  <a-modal
    v-model:visible="visible"
    :title="isAdd ? '添加商品' : '编辑商品'"
    :forceRender="true"
    :footer="null"
    :width="700"
  >
    <ProductForm
      :hiddenModal="hiddenModal"
      :initProductTable="initProductTable"
    />
  </a-modal>
</template>

<script>
import { onMounted, ref, toRaw } from "vue";
import { reqAllProducts, reqAllClasses } from "../../../api";
import ProductForm from "./ProductForm.vue";
import PubSub from "pubsub-js";
import {
  ShopTwoTone,
  EditOutlined,
  DeleteOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import SearchForm from "./SearchForm.vue";

// 表格中的商品逻辑
function useProductTable() {
  const columns = [
    {
      title: "商品编号",
      dataIndex: "id",
    },
    {
      title: "商品名称",
      dataIndex: "name",
      slots: {
        customRender: "name",
      },
    },
    {
      title: "商品价格",
      dataIndex: "price",
      slots: {
        customRender: "price",
      },
    },
    {
      title: "商品描述",
      dataIndex: "description",
    },
    {
      title: "商品分类",
      dataIndex: "classesId",
      slots: {
        customRender: "classesId",
      },
    },
    {
      title: "操作",
      key: "action",
      slots: {
        customRender: "action",
      },
    },
  ];

  const dataSource = ref([]);
  const classes = ref([]);

  // 请求所有商品数据
  async function initProducts() {
    const { data } = await reqAllProducts();
    dataSource.value = data.items;
  }

  // 请求所有的商品分类
  async function initClasses() {
    const { data } = await reqAllClasses();
    classes.value = data.items;
    PubSub.publish("classesInfo", data.items);
  }

  function initProductTable() {
    initProducts();
    initClasses();
  }

  // 更新dataSource
  function updateDataSource(data) {
    dataSource.value = data;
  }

  onMounted(() => {
    initProductTable();
  });

  // 分类id计算商品分类
  function productType(id) {
    let type = "暂无分类";
    classes.value.forEach((c) => {
      if (c.id === id) {
        type = c.name;
        return;
      }
    });
    return type;
  }

  return {
    dataSource,
    columns,
    productType,
    initProductTable,
    updateDataSource,
  };
}

// 展示商品图片的hooks
function useProductPicture() {
  const isShow = ref(false);
  const imgSrc = ref(
    "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  );
  function showPicture(record) {
    isShow.value = true;
    imgSrc.value = record.picture;
  }
  return {
    showPicture,
    isShow,
    imgSrc,
  };
}

// 编辑/添加商品模态框中的商品逻辑
function useProductModal() {
  const isAdd = ref(false);
  const visible = ref(false);

  // 编辑商品
  function editProduct(item) {
    isAdd.value = false;
    visible.value = true;
    item = toRaw(item);
    PubSub.publish("productInfo", item);
    // 通知更新isAdd
    PubSub.publish("updateIsAdd", { isAdd: false });
  }

  // 添加商品
  function addProduct() {
    isAdd.value = true;
    visible.value = true;
    PubSub.publish("isAdd", { isAdd: true });
  }

  // 删除商品
  function deleteProduct(id) {
    PubSub.publish("deleteProduct", { id });
  }

  function hiddenModal() {
    visible.value = false;
  }

  return {
    editProduct,
    isAdd,
    visible,
    hiddenModal,
    addProduct,
    deleteProduct,
  };
}

export default {
  name: "Product",
  components: {
    ProductForm,
    ShopTwoTone,
    EditOutlined,
    DeleteOutlined,
    PlusOutlined,
    SearchForm,
  },
  setup() {
    const {
      columns,
      dataSource, //
      productType,
      initProductTable,
      updateDataSource,
    } = useProductTable();
    return {
      columns,
      dataSource,
      updateDataSource,
      productType,
      initProductTable,
      ...useProductPicture(),
      ...useProductModal(),
    };
  },
};
</script>

<style>
.vi-hover {
  cursor: pointer;
}
</style>
